<template>
	<div class="thetwo">
		<el-form
			:model="ruleForm"
			:rules="rules"
			ref="ruleForm"
			label-width="130px"
			class="demo-ruleForm"
		>
			<el-form-item label="商品主图：" prop="shopimg">
				<el-upload
					class="avatar-uploader"
					action="https://jsonplaceholder.typicode.com/posts/"
					:show-file-list="false"
				>
					<img v-if="imageUrl" :src="imageUrl" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				<el-dialog :visible.sync="ruleForm.dialogVisible">
					<img width="100%" :src="ruleForm.dialogImageUrl" alt="" />
				</el-dialog>
			</el-form-item>
			<el-form-item label="商品轮播：" prop="shopimg">
				<el-upload
					class="avatar-uploader"
					action="https://jsonplaceholder.typicode.com/posts/"
					:show-file-list="false"
				>
					<img v-if="imageUrl" :src="imageUrl" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				<el-dialog :visible.sync="ruleForm.dialogVisible">
					<img width="100%" :src="ruleForm.dialogImageUrl" alt="" />
				</el-dialog>
			</el-form-item>
			<el-form-item label="商品关键字：">
				<el-input v-model="ruleForm.valtext"></el-input>
			</el-form-item>
			<el-form-item label="商品简介：">
				<el-input type="textarea" v-model="ruleForm.desc"></el-input>
			</el-form-item>
			<el-form-item label="单位：">
				<el-input placeholder="件"></el-input>
			</el-form-item>
			<el-form-item label="活动日期：">
				<el-time-select
					type="date"
					placeholder="选择日期"
					v-model="ruleForm.date1"
				>
				</el-time-select
				>至
				<el-time-select placeholder="选择时间"> </el-time-select>
			</el-form-item>
			<el-form-item label="砍价人数：">
				<el-input-number
					v-model="num3"
					@change="handleChange"
					:min="1"
					:max="10"
					label="描述文字"
				></el-input-number>
				<span
					>设置活动开启结束时间，用户可以在设置时间内发起参与砍价</span
				>
			</el-form-item>
			<el-form-item label="砍价次数：">
				<el-input-number
					v-model="num2"
					@change="handleChange"
					:min="1"
					:max="10"
					label="描述文字"
				></el-input-number>
				<span>需要邀请多少人砍价成功</span>
			</el-form-item>
			<el-form-item label="购买数量限制：">
				<el-input-number
					v-model="num1"
					@change="handleChange"
					:min="1"
					:max="10"
					label="描述文字"
				></el-input-number>
				<span
					>单个商品用户可以帮砍的次数，例:次数设置为1，甲和乙同时将商品A的砍价链接发给丙，丙只能帮甲或乙其中一个人砍价</span
				>
			</el-form-item>
			<el-form-item label="排序：">
				<el-input-number
					v-model="num"
					@change="handleChange"
					:min="1"
					:max="10"
					label="描述文字"
				></el-input-number>
				<span>单个活动每个用户发起砍价次数限制</span>
			</el-form-item>
			<el-form-item label="运费模板">
				<el-select placeholder="请选择">
					<el-option label="区域一" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="活动状态" prop="resource">
				<el-radio v-model="radio" label="1">关闭</el-radio>
				<el-radio v-model="radio" label="2">开启</el-radio>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
export default {
	name: "Theform",
	data() {
		return {
			radio: "1",
			num: 0,
			num1: 0,
			num2: 0,
			num3: 0,
			ruleForm: {
				name: "",
				region: "",
				send: "",
				imageUrl: "",
				dialogImageUrl: "",
				dialogVisible: false,
				banner: "",
				bannerVisible: false,
			},
			rules: {
				name: [
					{
						required: true,
						message: "请输入活动名称",
						trigger: "blur",
					},
					{
						min: 3,
						max: 5,
						message: "长度在 3 到 5 个字符",
						trigger: "blur",
					},
				],
				region: [
					{
						required: true,
						message: "请选择活动区域",
						trigger: "change",
					},
				],
				date1: [
					{
						type: "date",
						required: true,
						message: "请选择日期",
						trigger: "change",
					},
				],
				date2: [
					{
						type: "date",
						required: true,
						message: "请选择时间",
						trigger: "change",
					},
				],
				type: [
					{
						type: "array",
						required: true,
						message: "请至少选择一个活动性质",
						trigger: "change",
					},
				],
				resource: [
					{
						required: true,
						message: "请选择活动资源",
						trigger: "change",
					},
				],
				desc: [
					{
						required: true,
						message: "请填写活动形式",
						trigger: "blur",
					},
				],
			},
		};
	},
	methods: {
		submitForm(formName) {
			return new Promise((resolve, reject) => {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						resolve("submit!");
					} else {
						reject("error submit!!");
						return false;
					}
				});
			});
		},
		handleChange() {
			console.log(value);
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
	},
};
</script>
<style lang="scss" scoped>
.banner-Box {
	display: flex;
	// flex-direction: column;
}
.thetwo {
	width: 100%;
	height: auto;
	span {
		color: #999;
		margin-left: 30px;
	}
}
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 80px;
	height: 80px;
	line-height: 80px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
.el-form-item {
	width: 1500px;
}
.el-input-number {
	width: 400px;
}
.addshop_bottom {
	margin-bottom: 50px;
}
</style>
